import React, { useEffect } from 'react';
import { Button, Drawer, Form, Input, notification, Space } from 'antd';
import type { CompanyItem, CompanyList } from '../../../types';
import { rules } from '../../../types/rules'
import { editCompanyItemApi } from '../../../api';


interface Props {
  title:string
  visible:boolean,
  data:CompanyList | undefined,
  onClose:()=>void
}
const DrawerItem: React.FC<Props> = ({title,visible,onClose,data }) => {
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };
  const [form] = Form.useForm();

  useEffect(()=>{
    if(data?.id){
      form.setFieldsValue({
        id:data.id,
        name:data.name,
        account:data.account,
        bank_name:data.bank_name
      })
    }
  },[data])
  // 信息提醒
  const [markInfo,contentHolder] = notification.useNotification()
  const onFinish =async (values : CompanyItem) => {
    // console.log(values)
    // return
    if(!values.id){
      return markInfo.warning({
        message:'提示',
        description:'ID不存在，无法修改',
        placement:'topRight'
      })
    }
    const res = await editCompanyItemApi(values.id,{
      name:values.name,
      account:values.account,
      bank_name:values.bank_name
    })
    if(res.data.code === 10000){
      markInfo.success({
        message:'提示',
        description:res.data.message,
        placement:'topRight'
      })
      onClose()
    }
  };

  const onReset = () => {
    form.resetFields();
  };
  // console.log('data',data)
  return (
    <>
      <Drawer
        title={title}
        closable={{ 'aria-label': 'Close Button' }}
        onClose={onClose}
        open={visible}
        width={500}
      >
        <Form
          {...layout}
          form={form}
          name="control-hooks"
          onFinish={onFinish}
        >
          <Form.Item name="id" label="id" hidden>
             <Input  hidden/>
          </Form.Item>
          <Form.Item name="name" label="公司名称" rules={rules.name}>
             <Input placeholder="请输入公司名称" />
          </Form.Item>
          <Form.Item name="account" label="账 户" rules={[{ required: true }]}>
             <Input placeholder="请输入银行账号" />
          </Form.Item>
          <Form.Item name="bank_name" label="银行支行" rules={[{ required: true }]}>
             <Input placeholder="请输入开户行名称" />
          </Form.Item>
          <Form.Item {...tailLayout} style={{margin:'0 auto',textAlign:'center',maxWidth:600}}>
            <Space>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
              <Button htmlType="button" onClick={onReset}>
                重置输入框
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Drawer>
      {contentHolder}
    </>
  );
};

export default DrawerItem;